<template>
	<view class="page">
		<jnavbar :title="'物流详情'"></jnavbar>
		<view class="wlinfo">
			<image v-if="wlInfo.Logo" class="Logo" :src="wlInfo.Logo"></image>
			<text>{{ name }}</text>
			<text>{{ wlInfo.LogisticCode }}</text>
		</view>
		<!-- 收货地址 -->
		<view class="content bgf" v-if="ishas">
			<view>
				<view class="flex list">
					<view class="time"></view>
					<view class="info flex1">
						<view class="title address">[收货地址]{{ address.replace(/,/g, '') }}</view>
					</view>
				</view>
				<view class="flex list" :class="{one: index == 0 && wlInfo.State == 3}" v-for="(item, index) in wlInfo.Traces" :key="index">
					<view class="time">
						<view class="day">{{ item.timeArr[0] }}</view>
						<view>{{ item.timeArr[1] }}</view>
					</view>
					<view class="info flex1">
						<view class="title">{{ index == 0 && wlInfo.State == 3 ? '已签收' : '配送中' }}</view>
						<view class="text">{{ item.AcceptStation }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content bgf" v-else><view class="tip">暂无轨迹信息</view></view>
	</view>
</template>

<script>
import http from '@/common/http.js';

export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			wlInfo: {},
			ishas: true,
			address: '',
			name:''
		};
	},

	async onLoad(e) {
		await this.$getWx
		this.id = e.id;
		this.address = e.address;
		this.name=e.name
		this.getlogistics();
	},

	methods: {
		getlogistics() {
			let data = {
				code: this.id
			};
			http('/order/logistics', data, 'GET').then(res => {
				if (res.statusCode == 200) {
					let data = JSON.parse(res.data.msg);
					if (data.State == 0) {
						this.ishas = false;
					} else {
						this.ishas = true;
						data.Traces.forEach(a => {
							a.timeArr = a.AcceptTime.split(' ');
						});
						data.Traces = data.Traces.reverse();
						this.wlInfo = data;
					}
				}
				// console.log(res)
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	height: 100vh;
	/* #ifdef H5 */
	// height: calc(100vh - 44px);
	/* #endif */
	font-size: 24rpx;
	background-color: #f6f7f8;
	overflow-y: auto;
}

/*flex 转换成flex容器*/
.flex {
	display: flex;
	flex-direction: row;
}

/*flex1 自动填充*/
.flex1 {
	flex: 1;
}

/*ali-c 竖直居中*/
.ali-c {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.bgf {
	background-color: #fff;
}
.tip {
	margin-left: 24rpx;
}
.express {
	//圆通快递
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 30rpx 20rpx 30rpx 20rpx;

	.top {
		padding: 28rpx 29rpx 25rpx 29rpx;

		.img {
			display: block;
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}

		.text {
			margin-left: 20rpx;

			.text1 {
				margin-bottom: 6rpx;
				font-size: 28rpx;
				color: #000000;
			}

			.text2 {
				font-size: 20rpx;
				color: #000000;
			}
		}
	}

	.right {
		background-color: rgba(8, 175, 254, 0.02);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		padding: 15rpx 30rpx 20rpx 30rpx;

		.text {
			color: #666666;
			font-size: 22rpx;
		}
	}
}

.wlinfo {
	.Logo {
		width: 80rpx;
		height: 80rpx;
	}
	display: flex;
	margin: 20rpx;
	align-items: center;
	padding: 32rpx 46rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	text {
		font-size: 30rpx;
		margin-left: 30rpx;
	}
}
//收货地址
.content {
	margin: 20rpx;
	padding: 56rpx 46rpx 56rpx 5rpx;
	border-radius: 20rpx;

	.list {
		&:first-child {
			.info::before {
				bottom: -20rpx;
				margin-top: 40rpx;
				border-left: 1px dashed #e5e5e5;
			}

			.title {
				margin-bottom: 56rpx;

				&::before {
					width: 46rpx;
					height: 46rpx;
					left: -23rpx;
					background: url('')
						no-repeat center;
					background-size: 46rpx 46rpx;
				}
			}
		}

		&:last-child {
			.info::before {
				height: 32rpx;
			}
		}

		&.one {
			.info::before {
				margin-top: 20rpx;
			}

			.title {
				color: #1a1a1a;

				&::before {
					width: 46rpx;
					height: 46rpx;
					left: -23rpx;
					background: url('')
						no-repeat center;
					background-size: 46rpx 46rpx;
				}
			}

			.text {
				color: #666;
			}

			.time {
				color: #333;

				.day {
					font-size: 24rpx;
				}
			}
		}
	}

	.time {
		width: 200rpx;
		padding-right: 30rpx;
		font-size: 20rpx;
		text-align: right;
		color: #999;

		.day {
			margin-bottom: 4rpx;
		}
	}

	.info {
		position: relative;
		padding-top: 12rpx;
		color: #999;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			z-index: 1;
			width: 0;
			border-left: 1px solid #e5e5e5;
		}

		.title {
			position: relative;
			margin-bottom: 10rpx;
			padding-left: 32rpx;
			font-size: 28rpx;

			&::before {
				content: '';
				position: absolute;
				left: -3px;
				top: 0;
				bottom: 0;
				z-index: 1;
				width: 7px;
				height: 7px;
				margin: auto 0;
				border-radius: 50%;
				background-color: #cecece;
			}

			&.address {
				font-size: 24rpx;
				color: #333;
			}
		}

		.text {
			padding: 0 0 44rpx 32rpx;
		}
	}
}
</style>
